import React from 'react';
import { Modal, message } from 'antd';
import moment from 'moment/moment';
import Api from 'Utils/api';
import Record from './Charts/ChartOfPsNumOfCo';
import DayCheck from './Charts/CakeOfCheck';
import './index.scss';

const TIME_FORMAT = 'YYYY/MM/DD';
const TIME_SKIP = {
  day: 1,
  month: 2,
  year: 3
};
class MapInfo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      recordId: '',
      businessInfo: {}, // 企业信息
      businessPunishInfo: [], // 处罚信息
      businessCheck: {}, // 检查记录
      businessProRecord: [], //产品记录
      dayRecord: [],
      gpsData: [],
      deptName: ''
    }
    ;
    this.showModal = ::this.showModal;
    this.close = ::this.close;
    this.renderCheckRecord = ::this.renderCheckRecord;
    this.getRes = ::this.getRes;
    this.renderProduct = ::this.renderProduct;
    this.getDeptName = ::this.getDeptName;
  }

  showModal(id) {
    this.setState({
      visible: true,
      recordId: id
    }, () => {
      this.initBusinesInfo();
      this.initBusinessPunish();
      this.initBusinessCheck();
      this.initBusinessProRecord();
      this.initRecordData();
      this.initGpsDataSkip();
    });
  }
  getDeptName(business) {
    const api = new Api({
      method: 'GET',
      path: `/depts/${business.manage_gov_id}`,
      success: (res) => {
        this.setState({
          deptName: res.name
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  //企业巡查记录
  initGpsDataSkip() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/time_gps_data/${this.state.recordId}`,
      query: {
        start_time: moment().subtract(1, 'years').format('YYYY-MM-DD'),
        end_time: moment().format('YYYY-MM-DD'),
        time_type: TIME_SKIP.month
      },
      success: (res) => {
        const data = res.map((item) => {
          const newItem = {
            month: item.time_name,
            count: item.count
          };
          return newItem;
        });
        this.setState({
          gpsData: [...data]
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  // 企业信息
  initBusinesInfo() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/enterprise_info/${this.state.recordId}`,
      success: (res) => {
        this.setState({
          businessInfo: res
        });
        // 获取管辖单位名
        this.getDeptName(res);
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  // 日常巡查
  initRecordData() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/check_record/${this.state.recordId}`,
      success: (res) => {
        const total = res.total_count;
        const normal = res.normal_count;
        const error = total - normal;
        this.setState({
          dayRecord: [
            {
              name: '正常',
              value: total !== 0 ? parseFloat((normal / total).toFixed(4)) : 0
            },
            {
              name: '异常',
              value: total !== 0 ? parseFloat((error / total).toFixed(4)) : 0
            }
          ]
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  //行政处罚记录
  initBusinessPunish() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/justice_case/${this.state.recordId}`,
      success: (res) => {
        this.setState({
          businessPunishInfo: res.data_list.length > 4 ? res.data_list.splice(0, 5) : res.data_list
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  //产品记录
  initBusinessProRecord() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/produce_data/${this.state.recordId}`,
      success: (res) => {
        this.setState({
          businessProRecord: res.data_list.length > 2 ? res.data_list.splice(0, 3) : res.data_list
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  //抽检检测
  initBusinessCheck() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/product_check/${this.state.recordId}`,
      success: (res) => {
        this.setState({
          businessCheck: res.data_list.length > 4 ? res.data_list.splice(0, 5) : res.data_list
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  close() {
    this.setState({
      visible: false,
    });
  }
  getRes(id) {
    if (parseInt(id, 10) === 1) {
      return {
        color: '#F02828',
        label: '不合格'
      };
    } else if (parseInt(id, 10) === 0) {
      return {
        color: '#23FF76',
        label: '合格'
      };
    }
    return {
      color: '#F02828',
      label: '未检验'
    };
  }
  renderCheckRecord() {
    const { businessCheck } = this.state;
    const nodeInfo = [];
    for (let i = 0, len = businessCheck.length; i < len; i++) {
      const item = businessCheck[i];
      const res = this.getRes(item.check_result);
      nodeInfo.push((
        <div className="row-wrap" key={item.id}>
          <span>{item.sample_name || ''}</span>
          <span>{item.check_date ? moment(item.check_date).format(TIME_FORMAT) : ''}</span>
          <span>{item.project_name || ''}</span>
          <span style={{ color: res.color }}>{res.label || ''}</span>
        </div>
      ));
    }
    return nodeInfo;
  }
  renderProduct() {
    const { businessProRecord } = this.state;
    const nodeInfo = [];
    for (let i = 0, len = businessProRecord.length; i < len; i++) {
      const item = businessProRecord[i];
      nodeInfo.push((
        <div className="row-wrap" key={item.id}>
          <div>{item.name || ''}</div>
          <div>{item.count || ''}</div>
          <div>{item.produce_date ? moment(item.produce_date).format(TIME_FORMAT) : ''}</div>
        </div>
      ));
    }
    return nodeInfo;
  }
  render() {
    const realWidth = parseInt(window.innerWidth, 10) > 2080 ? parseInt(window.innerWidth, 10) : 2080;
    console.log(realWidth);
    const width = realWidth - (236 * 2);
    const { businessInfo, businessPunishInfo, gpsData, deptName } = this.state;
    return (
      <Modal
        className="map-info-modal"
        visible={this.state.visible}
        width={width}
        footer={null}
        closable={false}
      >
        <img src="images/head/icon_close.png" alt="关闭" className="close" onClick={this.close} />
        <div className="items-wrap items-wrap-left">
          <div className="item">
            <div className="content-wrap">
              <div className="header">
                巡检记录
              </div>
              <div className="content">
                <Record data={gpsData} />
              </div>
            </div>
          </div>
          <div className="item">
            <div className="content-wrap">
              <div className="header">
                行政处罚信息
              </div>
              <div className="content table-bottom">
                <div className="title-wrap">
                  <span>日期</span>
                  <span>处罚金额</span>
                  <span>处罚文号</span>
                </div>
                {
                  businessPunishInfo.length > 0 && businessPunishInfo.map(item => (
                    <div className="row-wrap" key={item.id}>
                      <div>{item.case_date ? moment(item.case_date).format(TIME_FORMAT) : ''}</div>
                      <div>{item.fine || ''}</div>
                      <div>{item.case_code || ''}</div>
                    </div>
                  ))
                }
              </div>
            </div>
          </div>
        </div>
        <div className="items-wrap items-wrap-middle">
          <div className="item">
            <div className="content-wrap">
              <div className="header">
                企业信息
              </div>
              <div className="content business">
                <div className="business-wrap">
                  <div>
                    <span>企业：</span>
                    <span>{businessInfo.name || ''}</span>
                  </div>
                  <div>
                    <span>地址：</span>
                    <span>{businessInfo.address || ''}</span>
                  </div>
                  <div>
                    <span>法定代表人：</span>
                    <span>{businessInfo.legal_entity || ''}</span>
                  </div>
                  <div>
                    <span>企业类型：</span>
                    <span>{businessInfo.type || ''}</span>
                  </div>
                  <div>
                    <span>注册资金：</span>
                    <span>{businessInfo.fund || ''}元</span>
                  </div>
                  <div>
                    <span>经营范围：</span>
                    <span>{businessInfo.scope || ''}</span>
                  </div>
                  <div>
                    <span>注册号：</span>
                    <span>{businessInfo.reg_code || ''}</span>
                  </div>
                  <div>
                    <span>成立日期：</span>
                    <span>{ businessInfo.reg_date ? moment(businessInfo.reg_date).format('YYYY-MM-DD') : ''}</span>
                  </div>
                  <div>
                    <span>登记机关：</span>
                    <span>{businessInfo.reg_gov || ''}</span>
                  </div>
                  <div>
                    <span>管辖单位：</span>
                    <span>{deptName || ''}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="content-wrap">
              <div className="header">
                产品信息
              </div>
              <div className="content middle-height">
                <div className="title-wrap">
                  <span>产品名称</span>
                  <span>生产数量</span>
                  <span>生产时间</span>
                </div>
                {
                  this.renderProduct()
                }
              </div>
            </div>
          </div>
          {/*<div className="item">
            <div className="content-wrap">
              <div className="header">
                供应商信息
              </div>
              <div className="content">
                <div className="row-supply">
                  仙居番薯种植户
                </div>
                <div className="row-supply">
                  白塔镇张东阳种植户
                </div>
                <div className="row-supply">
                  仙居萝卜头农场
                </div>
              </div>
            </div>
          </div>*/}
        </div>
        <div className="items-wrap items-wrap-right">
          <div className="item">
            <div className="content-wrap">
              <div className="header">
                日常巡查
              </div>
              <div className="content">
                <DayCheck data={this.state.dayRecord} />
              </div>
            </div>
          </div>
          <div className="item">
            <div className="content-wrap">
              <div className="header">
                抽检记录
              </div>
              <div className="content table-bottom">
                <div className="title-wrap">
                  <span>样品名称</span>
                  <span>抽检时间</span>
                  <span>检验项目</span>
                  <span>检验结果</span>
                </div>
                {
                 this.renderCheckRecord()
                }
              </div>
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}

export default MapInfo;
